<script setup>
import { nextTick, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
import { getForumArticleListByUserIdService, deleteForumArticleByArticleIdService } from '@/api/forumArticle';
import { useRouter, useRoute } from 'vue-router'
import { getCurrentInstance } from "vue";
import { useUserInfoStore } from '@/store/userInfo';
import { useUserUpdateArticleIdStore } from '@/store/updateArticleId';

const userInfoStore = useUserInfoStore()
const useUpdateArticleIdStore = useUserUpdateArticleIdStore()

const { proxy } = getCurrentInstance(); // 获取全局注册的组件

const router = useRouter()
const route = useRoute()

const formData = ref({
  userId: null,
  pageNum: 1, // 页数
  pageSize: 6, // 每页条数
  orderType: 1, // 排序方式（默认为最新）
})
// 获取用户发表的文章列表
const articleList = ref([])
const articleListTotal = ref(0)
const getForumArticleListByUserId = async () => {
  let res = await getForumArticleListByUserIdService(formData.value)
  console.log("获取用户发表的文章列表: ", res.data)
  articleList.value = res.data.forumArticleList
  articleListTotal.value = res.data.total
}

// 搜索条件切换
const handleTabChange = (tab) => {
  formData.value.orderType = tab.props.name
  getForumArticleListByUserId()
}

// 页数变化
const handleCurrentChange = (num) => {
  formData.value.pageNum = num
  getForumArticleListByUserId()
}

// 去往文章编辑页面
const toEeditArticlePage = (aId) => {
  useUpdateArticleIdStore.setArticleId(aId)
  router.push("/article/post")
}

// 删除文章对话框显示条件
const showDeleteForumArticleDialogCondition = ref(false)
// 当前选中的文章
const chooseForumArticle = ref({})
// 显示删除文章对话框
const showDeleteForumArticleDialog = (item) => {
  showDeleteForumArticleDialogCondition.value = true
  chooseForumArticle.value = item
}
// 关闭删除文章对话框
const closeDeleteForumArticleDialog = () => {
  showDeleteForumArticleDialogCondition.value = false
}
// 删除文章
const deleteForumArticleByArticleId = async () => {
  const res = await deleteForumArticleByArticleIdService({
    "articleId": chooseForumArticle.value.articleId
  })
  // 关闭删除文章对话框
  closeDeleteForumArticleDialog()
  // 我们自己封装的通知框
  proxy.Notification.success("文章删除成功")
  // 重新获取文章列表
  getForumArticleListByUserId()
}

onMounted(() => {
  formData.value.userId = route.params.userId
  getForumArticleListByUserId()
})

</script>

<template>
  <div class="user-article">
    <!-- 头部搜索条件 -->
    <div class="list-header">
      <el-tabs v-model="formData.orderType" class="demo-tabs" @tab-click="handleTabChange">
        <el-tab-pane label="最新" :name="1"></el-tab-pane>
        <el-tab-pane label="热门" :name="0"></el-tab-pane>
      </el-tabs>
      <div class="list-total">文章总数：{{ articleListTotal }}</div>
    </div>
    <!-- 若无文章 -->
    <el-empty v-if="articleListTotal == 0" :image-size="100" description="目前暂无文章记录"></el-empty>
    <!-- 文章列表 -->
    <div v-if="articleListTotal != 0" class="user-article-list">
      <div class="user-article-list-item" v-for="(item, index) in articleList"
        @click="router.push(`/article/detail/${item.articleId}`)">
        <!-- 左侧文章详情 -->
        <div class="user-article-list-item-l">
          <div class="user-article-list-item-header">
            <div class="user-article-list-item-header-title">{{ item.title }}</div>
            <div class="other-action" v-if="userInfoStore.userInfo.userId == item.userId">
              <el-popover placement="right" trigger="hover">
                <ul>
                  <li class="other-opt" @click="toEeditArticlePage(item.articleId)">编辑</li>
                  <li class="other-opt" style="color: red;" @click="showDeleteForumArticleDialog(item)">删除
                  </li>
                </ul>
                <template #reference>
                  <span class="iconfont icon-moreandroid"></span>
                </template>
              </el-popover>
            </div>
          </div>
          <div class="user-article-list-item-content">
            <div class="user-article-list-item-content-summary">{{ item.summary ? item.summary : "暂无简介" }}</div>
          </div>
          <div class="user-article-list-item-footer">
            <div class="user-article-list-item-footer-l">
              <span>发布时间：</span>
              <span class="footer-num">{{ item.postTime }}</span>
              <span class="iconfont icon-eye"></span>
              <span class="footer-num">{{ item.readCount }}</span>
              <span class="iconfont icon-appreciate"></span>
              <span class="footer-num">{{ item.likeCount }}</span>
              <span class="iconfont icon-review"></span>
              <span class="footer-num">{{ item.commentCount }}</span>
            </div>
            <div class="user-article-list-item-footer-r">
              <span class="board-name" v-if="item.boardName">{{ item.boardName }}</span>
              <span class="board-name" v-if="item.parentBoardName">{{ item.parentBoardName }}</span>
            </div>
          </div>
        </div>
        <!-- 右侧文章封面 -->
        <div class="user-article-list-item-r" v-if="item.cover">
          <div class="user-article-list-item-cover">
            <img :src="item.cover" alt="">
          </div>
        </div>

      </div>
    </div>
    <!-- 分页区域 -->
    <div v-if="articleListTotal != 0" class="pagination">
      <el-pagination @current-change="handleCurrentChange" :page-size="Number(formData.pageSize)"
        :total="articleListTotal" background layout="prev, pager, next" />
    </div>
  </div>

  <!-- 删除文章确认框 -->
  <el-dialog v-model="showDeleteForumArticleDialogCondition" width="500" :before-close="closeDeleteForumArticleDialog">
    <div style="padding-top: 15px;"> 确定要删除该文章吗？</div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDeleteForumArticleDialog">取消</el-button>
        <el-button type="danger" @click="deleteForumArticleByArticleId"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
/* 头部搜索条件 */
.user-article .list-header {
  border-bottom: 1px solid #e4e6eb;
  padding: 5px 20px 0px;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-article .list-total {
  color: #8a919f;
}

/* 文章列表 */
.user-article .user-article-list .user-article-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dotted #ddd;
  cursor: pointer;
  padding-left: 20px;
  padding-right: 20px;
}

.user-article .user-article-list .user-article-list-item:hover {
  background-color: #f7f8fa;
}

/* 左侧文章详情 */
.user-article .user-article-list .user-article-list-item .user-article-list-item-l {
  flex: 1;
}

.user-article .user-article-list .user-article-list-item .user-article-list-item-l .user-article-list-item-header {
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-article .user-article-list .user-article-list-item .user-article-list-item-l .user-article-list-item-header-title {
  font-weight: 600;
  font-size: 16px;
  color: #252933;
}

.other-opt {
  height: 30px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding-left: 10px;
}

.other-opt:hover {
  background-color: rgb(246, 246, 247);
  border-radius: 5px;
}

.user-article .user-article-list .user-article-list-item .user-article-list-item-l .user-article-list-item-content {
  margin-bottom: 9px;
  width: 800px;
}

.user-article .user-article-list .user-article-list-item .user-article-list-item-l .user-article-list-item-content-summary {
  color: #8a919f;
  font-size: 13px;
  /* 多行文字只显示一行 */
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-article .user-article-list .user-article-list-item .user-article-list-item-l .user-article-list-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-article .user-article-list .user-article-list-item .user-article-list-item-l .user-article-list-item-footer-l {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #8a919f;
}

.user-article .user-article-list .user-article-list-item .user-article-list-item-l .user-article-list-item-footer-l .iconfont {
  margin-right: 5px;
}

.user-article .user-article-list .user-article-list-item .user-article-list-item-l .user-article-list-item-footer-l .footer-num {
  margin-right: 20px;
}

.user-article .user-article-list .user-article-list-item .user-article-list-item-l .user-article-list-item-footer-r {
  display: flex;
  align-items: center;
}

.user-article .user-article-list .user-article-list-item .user-article-list-item-l .user-article-list-item-footer-r .board-name {
  background-color: #f2f3f5;
  padding: 0 6px;
  border-radius: 2px;
  margin-left: 6px;
  color: #8a919f;
  cursor: pointer;
  font-size: 13px;
  line-height: 18px;
}

/* 右侧文章封面 */
.user-article .user-article-list .user-article-list-item-r {
  width: 110px;
  height: 70px;
  margin-left: 10px;
}

.user-article .user-article-list .user-article-list-item-r .user-article-list-item-cover {
  width: 100%;
  height: 100%;
  display: flex;
}

.user-article .user-article-list .user-article-list-item-r .user-article-list-item-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* hover效果 */
.user-article .user-article-list .user-article-list-item .user-article-list-item-l .user-article-list-item-header-title:hover,
.user-article .user-article-list .user-article-list-item .user-article-list-item-l .user-article-list-item-footer-r .board-name:hover {
  color: green;
}

/* 分页区域 */
.user-article .pagination {
  padding: 10px;
}
</style>